

<template>
    <div class="person">
      <h2 ref="h">java</h2>
      <h2>python</h2>
      <h2>vue</h2>
      <button @click="getMsg">获取标签中的数据</button>
    </div>

</template>

<script setup lang="ts" name="Person">
import { ref,defineExpose } from 'vue';
    let name=ref("张三")
    let age=ref(22)


// ref可以给dom节点进行标记
// 使用时要注意，定义的变量名字，要与标签中的ref属性的值相同，后面可以直接定位到ref属性值为该变量的dom节点
    let h=ref()
    function getMsg(){
        // console.log(document.getElementById("h"))
        console.log(h.value)
    }
    defineExpose({name,age})

</script>
<!-- 在style标签中，加上scoped属性，则表示当前的样式做作用于当前页面 -->
<style scoped>
.person{
    background-color: lightseagreen;
	box-shadow: 6px 6px 12px gray;
	border-radius: 6px;
	line-height: 40px;
	padding:10px;

}
</style>